import { defineComponent, PropType } from 'vue';
import useModule from './index.module';
import {
  HeaderConfigItem,
  HeaderDisplay,
  ExportDataItem,
  ApiConfig,
  ButtonConfig
} from './types';

export default defineComponent({
  name: 'ExportExcel',
  props: {
    /** 导出excel头部配置 */
    headerConfig: {
      type: Array as PropType<HeaderConfigItem[]>,
      default: () => {
        return [];
      }
    },
    /** 导出excel头部展示参数 */
    headerDisplay: {
      type: Object as PropType<HeaderDisplay>,
      default: () => {
        return {};
      }
    },
    /** 导出数据 */
    exportData: {
      type: Array as PropType<ExportDataItem[]>,
      default: () => {
        return [];
      }
    },
    /** 接口请求配置，若此参数有值，则接口调用，否则使用外部的exportData */
    apiConfig: {
      type: Object as PropType<ApiConfig>,
      default: () => {
        return null
      }
    },
    /** 按钮配置 */
    buttonConfig: {
      type: Object as PropType<ButtonConfig>,
      default: () => {
        return {
          text: '下载excel',
          type: 'primary',
          size: '',
          disabled: false,
          plain: false,
          icon: ''
        }
      }
    },
    /** 导出文件名 */
    fileName: {
      type: String,
      default: '任务统计'
    }
  },
  setup(props, { emit }) {
    const {
      methods
    } = useModule(props, { emit });
    return () => (
      <el-button
        type={props.buttonConfig.type ?? 'primary'}
        size={props.buttonConfig.size ?? ''}
        disabled={props.buttonConfig.disabled ?? false}
        plain={props.buttonConfig.plain ?? false}
        icon={props.buttonConfig.icon ?? ''}
        onClick={methods.exportControl}
      >
        {
          props.buttonConfig.text
        }
      </el-button>
    )
  }
})
